<template>
  <super-table
    :pagination=pagination
    :pageSize="50"
    :scroll="{ x: 1000}"
    ref="ref_customerConsumption_table"
    ls_props_columns="customerConsumption"
    :rowKey="(record,index)=> index"
    :columns="consumptionColumns"
    :data="loadConsumptionData"
  >
    <!--序号-->
    <template slot="index" slot-scope="text,record,index">
      <span>{{index+1}}</span>
    </template>
    <!--客户消费-->
    <template slot="itemName" slot-scope="text">
      <a-tooltip placement="bottomLeft">
        <template slot="title">
          {{text}}
        </template>
        {{text}}
      </a-tooltip>
    </template>
  </super-table>
</template>

<script>
import {SuperTable} from '@/components'
import { getConsumptionByCustomerId } from '@/api/customer/customer'

export default {
  name: 'TabConsumption',
  props:{
    customerId:{
      type:String,
      default:''
    },
  },

  components:{
    SuperTable
  },
  data(){
    return{
      //封装的超级表格数据，需要返回一个promise，可见src/components/table组件
      loadConsumptionData: parameter => {
        return getConsumptionByCustomerId(this.customerId).then(res => {
          // console.log('客户消费',res)
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'itemName')),"itemName",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'deptName')),"deptName",res.rows) 
          this.getFilterOp(Object.keys(this.groupBy(res.rows,'residueQty')),"residueQty",res.rows) 
          return this.filterOp(parameter,res)
          // return res
        })
      },
      //客户消费表列结构
      consumptionColumns: [
        { title: '序号',scopedSlots: { customRender: 'index' }, width:60,fixed:'left'},
        { title: '项目名称',dataIndex: 'itemName', key: 'itemName',scopedSlots: { customRender: 'itemName' },width: 120,ellipsis: true,id:'itemName'},
        { title: '科室',dataIndex: 'deptName', key: 'deptName',width: 120,id:'deptName'},
        { title: '收费状态',dataIndex: 'chargeState', key: 'chargeState',width: 80},
        { title: '总次数',dataIndex: 'qty', key: 'qty',width: 60},
        { title: '剩余次数',dataIndex: 'residueQty', key: 'residueQty',width: 120,id:'residueQty'},
        { title: '消费日期',dataIndex: 'chargeDate', key: 'chargeDate',width: 150},
        { title: '单位',dataIndex: 'unit', key: 'unit',width: 100},
        { title: '价格',dataIndex: 'itemPrice', key: 'itemPrice',width: 100},
        { title: '咨询师',dataIndex: 'consultMan', key: 'consultMan',width: 100},
        { title: '销售员',dataIndex: 'xsy', key: 'xsy',width: 80,},
        // { title: '备注',dataIndex: 'remark', key: 'recorderDate',width: 180,},
      ],
      pagination: {
       pageSizeOptions: ['50', '100', '150','200'], //这里注意只能是字符串，不能是数字
      },
    }
  },
  activated() {
    if(this.$store.state.app.multiTab){
      // console.log('这里是激活缓存',this.$store.state.app)
      this.$nextTick(()=>{
        this.$refs.ref_customerConsumption_table && this.$refs.ref_customerConsumption_table.refresh()
      })
    }
  },

  watch:{
      $route(){     
        if(this.$route.query.id && this.$route.query.card_no){
            this.customerId = this.$route.query.id
            this.card_no = this.$route.query.card_no
            this.$refs.ref_customerConsumption_table && this.$refs.ref_customerConsumption_table.refresh()
        }
    }    
  },

  methods:{
     /**
     * data 数据分组的 key 集合
     * res 全部数据
     */
    filterOp(data,res,callback){
        let result={}
        result.code= 200,
        result.msg= "查询成功"
        result.rows=[]
        let tempArr=[]
        let list = JSON.parse(JSON.stringify(res.rows))
        let num =0 //满足的条件个数
        // 项目名称
        if(data.hasOwnProperty('itemName') && data.itemName.length>0){    
          num=num + data.itemName.length
          data.itemName.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.itemName == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
        // 科室
        if(data.hasOwnProperty('deptName') && data.deptName.length>0){    
          let tempArr =[]
          num=num + data.deptName.length
          data.deptName.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.deptName == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
        // 剩余次数
         if(data.hasOwnProperty('residueQty') && data.residueQty.length>0){    
          let tempArr =[]
          num=num + data.residueQty.length
          data.residueQty.forEach(i=>{
            let tempList= list.filter(item=>{
                return item.residueQty == i
              })    
              tempArr= tempArr.concat(tempList)
          })
          result.rows=tempArr
          list= tempArr
          result.total = result.rows.length
        }
      
        if(num == 0 ){
          return res
        }else{
          return result
        }
       
    },

    /**
     * keys 数据分组的 key 集合
     * key  当前需要分组 的字段 
     * list  全部数据
     * 
     * 分组 得到的 数据格式
     * {
     *    a:[]
     *    b:[]
     * }
     */
    getFilterOp(keys,key,list){
        let arr =[]
        keys.forEach(item=>{
          let obj={}
          obj.text=item || ''
          obj.value=item || ''            
          arr.push(obj)
        })  
        this.consumptionColumns.filter(items=>{
          return items.id == key
        })[0].filters=arr
    },
    groupBy(data,key){
        let groups={};
        data.forEach(c=>{
            let value=c[key];
            if(value==0 || value){
                groups[value]=groups[value]||[];
                groups[value].push(c);
            }         
        });
        return groups;
    },
  }
}
</script>

<style scoped>

</style>